import React, { Component } from "react";
import Videojs from "video.js";
import "video.js/dist/video-js.css";
//import "videojs-contrib-hls";

class VideoPlayer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      src: this.props.src
    }
  }
  componentWillUnmount() {
    // 销毁播放器
    if (this.player) {
      this.player.dispose();
    }
  }

  componentDidMount() {

  }
  componentDidUpdate(){
    this.renderVideo(this.props.src)
  }
  renderVideo(src) {
    this.player = Videojs(
      "custom-video",
      {
        height: '256px',
        width: '452px',
        bigPlayButton: true,
        textTrackDisplay: false,
        errorDisplay: false,
        controlBar: false,
        muted: false,
        type: "application/x-mpegURL",
      },
      function () {
        this.play();
      }
    );
    this.player.src({ src });
  }
  render() {
    return (
      <video
        style={{
          height: '256px',
          width: '452px',
        }}
        id="custom-video"
        className="video-js"
        // controls
        preload="auto"
      ></video>
    );
  }
}

export default VideoPlayer;